import React, { useRef, useState } from 'react';
import { getGoods, switchGoodStatus, switchGoodRecommend } from '@/services/goods';
import { Button, Image, Switch, message } from 'antd';
import { PlusOutlined } from '@ant-design/icons';
import ProTable from '@ant-design/pro-table';
import AddGood from './components/AddGood';

const Goods: React.FC = () => {
  // 表格 ref，便于自定义操作表格
  const actionRef = useRef();

  const [isModalVisible, setIsModalVisible] = useState(false);

  const columns = [
    {
      title: '商品图',
      dataIndex: 'cover_url',
      hideInSearch: true,
      // render 函数第一参数为当前表格的值，record 为整列数据
      render: (_, record) => {
        return (
          <Image
            width={64}
            src={record.cover_url}
            placeholder={<Image preview={false} src={record.cover_url} width={200}></Image>}
          ></Image>
        );
      },
    },
    {
      title: '标题',
      dataIndex: 'title',
    },
    {
      title: '价格',
      dataIndex: 'price',
      hideInSearch: true,
    },
    {
      title: '库存',
      dataIndex: 'stock',
      hideInSearch: true,
    },
    {
      title: '销量',
      dataIndex: 'sales',
      hideInSearch: true,
    },
    {
      title: '是否上架',
      dataIndex: 'is_on',
      valueType: 'radioButton',
      valueEnum: {
        1: { text: '已上架' },
        0: { text: '未上架' },
      },
      render: (_, record) => {
        return (
          <Switch
            checkedChildren="已上架"
            unCheckedChildren="未上架"
            onChange={() => {
              onSwitchGoodStatus(record.id);
            }}
            defaultChecked={record.is_on === 1}
          />
        );
      },
    },
    {
      title: '是否推荐',
      dataIndex: 'is_recommend',
      valueType: 'radioButton',
      valueEnum: {
        1: { text: '已推荐' },
        0: { text: '未推荐' },
      },
      render: (_, record) => {
        return (
          <Switch
            checkedChildren="已推荐"
            unCheckedChildren="未推荐"
            onChange={() => {
              onSwitchGoodRecommend(record.id);
            }}
            defaultChecked={record.is_recommend === 1}
          />
        );
      },
    },
    {
      title: '创建时间',
      dataIndex: 'updated_at',
      hideInSearch: true,
    },
  ];

  const getData = async (params) => {
    const rep = await getGoods(params);

    return {
      data: rep.data,
      success: true,
      total: rep.meta.pagination.total,
    };
  };

  const onSwitchGoodStatus = async (uid: string | number) => {
    const rep = await switchGoodStatus(uid);
    if (rep?.status) {
      message.error('操作失败');
    } else {
      message.success('操作成功');
    }
  };

  const onSwitchGoodRecommend = async (uid: string | number) => {
    const rep = await switchGoodRecommend(uid);
    if (rep?.status) {
      message.error('操作失败');
    } else {
      message.success('操作成功');
    }
  };

  const switchAddModalStatus = (status: boolean) => {
    setIsModalVisible(status);
  };

  return (
    <>
      <ProTable
        columns={columns}
        actionRef={actionRef}
        rowKey="id"
        request={async (params) => getData(params)}
        search={{
          labelWidth: 'auto',
        }}
        pagination={{
          pageSize: 10,
        }}
        dateFormatter="string"
        headerTitle="用户列表"
        toolBarRender={() => [
          <Button
            key="button"
            icon={<PlusOutlined />}
            type="primary"
            onClick={() => {
              switchAddModalStatus(true);
            }}
          >
            新建
          </Button>,
        ]}
      />

      <AddGood
        isModalVisible={isModalVisible}
        setModalStatus={switchAddModalStatus}
        actionRef={actionRef}
      ></AddGood>
    </>
  );
};

export default Goods;
